<template>
  <div class="wrap" v-if="hasInfo">
    <div class="head">
      <span class="title">选集</span>
      <span v-if="moreBtn" class="more" @click="togglePopup">{{ pubText }}<i class="fa fa-dropright"></i></span>
    </div>
    <div class="body" v-if="epList.length">
      <list-slider
        ref="listSlider"
        :auto-index="currentEpisodeIndex"
        :length="epList.length"
        :has-slider="false"
        :can-reset="true"
        @ready="onListSliderReady"
      >
        <ul class="ep-list">
          <li class="ep-item"
            v-for="item in epList"
            :key="item.id"
            :class="{active: currentEpisodeId === item.id, 'single-line': !item.long_title}"
            @click="selectEpisode(item)"
          >
            <h4 class="ep-title">{{ item.title | formatTitle(info.mediaInfo.type) }}</h4>
            <div v-if="item.long_title" class="ep-desc">{{ item.long_title }}</div>
            <div v-if="item.badge_info.text" class="ep-badge">{{ item.badge_info.text }}</div>
          </li>
        </ul>
      </list-slider>
    </div>
    <div class="foot" v-if="seasons.length">
      <list-slider
        :auto-index="0"
        :length="seasons.length"
        :has-slider="false"
      >
        <ul class="season-list">
          <li
            class="season-item"
            v-for="item in seasons"
            :key="item.season_id"
            :class="{active: currentSeasonId === item.season_id}"
            @click="selectSeason(item)"
          >
            <div class="inner">{{ item.season_title }}</div>
          </li>
        </ul>
      </list-slider>
    </div>
    <van-popup
      v-if="moreBtn"
      class="vpopup"
      :show.sync="popupShow"
    >
      <template #title>
        <span>选集({{ info.epList.length }})</span>
      </template>
      <ul class="ep-list">
        <li class="ep-item"
          v-for="item in epList"
          :key="item.id"
          :class="{active: currentEpisodeId === item.id, 'single-line': !item.long_title}"
          @click="selectEpisode(item)"
        >
          <h4 class="ep-title">{{ item.title | formatTitle(info.mediaInfo.type) }}</h4>
          <div v-if="item.long_title" class="ep-desc">{{ item.long_title }}</div>
          <div v-if="item.badge_info.text" class="ep-badge">{{ item.badge_info.text }}</div>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import ListSlider from '@/components/list-slider/ListSlider.vue'
import VanPopup from '@/components/popup/Popup.vue'
export default {
  name: 'BangumiEpisode',
  components: {
    ListSlider,
    VanPopup
  },
  props: {
    info: {
      type: Object
    }
  },
  data () {
    return {
      moreBtn: false,
      popupShow: false,
      currentSeasonId: this.info ? this.info.ssId : -1,
      currentEpisodeId: this.info ? this.info.epInfo.id : -1
    }
  },
  computed: {
    hasInfo () {
      return this.info !== null
    },
    pubInfo () {
      return this.hasInfo ? this.info.pubInfo : {}
    },
    pubText () {
      const mediaInfo = this.info.mediaInfo
      if (mediaInfo.mode === 1) {
        return ''
      }
      if (this.pubInfo.is_finish === 1) {
        const type = mediaInfo.type === 1 || mediaInfo.type === 4 ? '话' : '集'
        return `全${mediaInfo.total || 1}${type}`
      }
      return `更新至${this.getUpdateStr(this.info.newestEp.title, mediaInfo.type)}`
    },
    epList () {
      return this.hasInfo ? this.info.epList : []
    },
    seasons () {
      return this.hasInfo ? this.info.seasonList : []
    },
    currentEpisodeIndex () {
      let matchIndex = 0
      if (this.hasInfo) {
        const list = this.info.epList
        for (const [index, value] of list.entries()) {
          if (this.currentEpisodeId === value.id) {
            matchIndex = index
            break
          }
        }
      }
      return matchIndex
    },
    currentSeasonIndex () {
      let matchIndex = 0
      if (this.hasInfo) {
        const list = this.info.seasonList
        for (const [index, value] of list.entries()) {
          if (this.currentSeasonId === value.season_id) {
            matchIndex = index
            break
          }
        }
      }
      return matchIndex
    }
  },
  filters: {
    formatTitle (value, type) {
      return isNaN(value) ? value : ('第' + value + (type === 1 || type === 4 ? '话' : '集'))
    }
  },
  watch: {
    info: {
      deep: true,
      handler (newVal) {
        this.currentSeasonId = newVal.ssId
        this.currentEpisodeId = newVal.epInfo.id
      }
    },
    epList: {
      deep: true,
      handler (newVal) {
        this.$refs.listSlider.$emit('RESET_SLIDER_STAT')
      }
    }
  },
  methods: {
    onListSliderReady (needslide) {
      this.moreBtn = needslide
    },
    getUpdateStr (num, type) {
      const i = Number(num)
      const n = type === 1 || type === 4 || type === '番剧' || type === '国创' ? '话' : '集'
      return isNaN(i) ? num : '第'.concat(i).concat(n)
    },
    togglePopup () {
      this.popupShow = !this.popupShow
    },
    selectEpisode (episode) {
      const { id } = episode
      this.currentEpisodeId = id
      this.popupShow = false
      this.$emit('select-episode', episode)
    },
    selectSeason (season) {
      this.currentSeasonId = season.season_id
      this.$emit('select-season', season)
    }
  }
}
</script>
<style lang="scss" scoped>
  .wrap{
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    @include border1px (#e7e7e7, 0 0 1px 0);
    .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .title{
    padding: {
      top: rem(10px);
      bottom: rem(10px);
    }
    font: {
      size: rem(16px);
      weight: 700;
    }
  }
  .more{
    font-size: rem(13px);
    color: $color-text-secondary;
    .fa{
      font-size: rem(16px);
    }
  }
  .ep-list{
    white-space: nowrap;
    padding: {
      bottom: rem(16px);
    }
  }
  .ep-item{
    position: relative;
    display: inline-block;
    width: rem(130px);
    height: rem(45px);
    padding: rem(5px) rem(10px);
    margin-right: rem(10px);
    box-sizing: border-box;
    font-size: rem(12px);
    color: $color-text-regular;
    @include border1px(#ccc, 1px, rem(5px));
    &.active{
      @include border1px($theme-color, 1px, rem(5px));
      color: $theme-color;
    }
    &.single-line{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: rem(80px);
      height: rem(40px);
    }
  }
  .ep-title{
    font-size: rem(14px);
    margin: 0;
    font-weight: 500;
    line-height: rem(18px);
    @include max-lines(1);
  }
  .ep-desc{
    @include max-lines(1);
  }
  .ep-badge{
    position: absolute;
    right: rem(1px);
    top: rem(1px);
    padding: {
      left: rem(8px);
      right: rem(8px);
    }
    color: $color-white;
    background-color: $theme-color;
    border-radius: 0 0 0 rem(8px);
    height: rem(28px);
    line-height: rem(28px);
    font-size: rem(20px);
    transform: scale(0.5);
    transform-origin: top right;
  }

  .season-list{
    white-space: nowrap;
    padding-bottom: rem(16px);
  }
  .season-item {
    position: relative;
    display: inline-block;
    height: rem(32px);
    line-height: rem(32px);
    padding: 0 rem(8px) 0 rem(12px);
    margin: {
      right: rem(12px);
    };
    font-size: rem(12px);
    color: $color-text-regular;
    /* border: {
      style: solid;
      width: 1px 0;
      color: #e7e7e7;
    } */
    &:before,&:after{
      content: '';
      position: absolute;
      left: rem(2px);
      width: 100%;
      height: rem(16px);
      border: {
        style: solid;
        width: 0 1px;
        color: #e7e7e7
      }
    }
    &:before{
      top: 0;
      border-top-width: 1px;
      transform: skew(20deg);
    }
    &:after{
      top: rem(16px);
      border-bottom-width: 1px;
      transform: skew(-20deg);
    }
    &:first-child{
      padding-left: rem(10px);
      border-left: 1px solid #e7e7e7;
      &:before,&:after{
        border-left-width: 0;
      }
    }
    &:last-child{
      border-right: 1px solid #e7e7e7;
      &:before,&:after{
        border-right-width: 0;
      }
    }
    &.active{
      color: $theme-color;
      border-color: $theme-color;
      &:before,&:after{
        border-color: $theme-color;
      }
    }
  }

  .vpopup{
    .ep-list{
      white-space: normal;
      padding: {
        bottom: 0;
      }
    }
    .ep-item{
      width: rem(170px);
      height: rem(80px);
      margin: {
        right: rem(10px);
        bottom: rem(10px);
      }
      padding: rem(8px) rem(10px);
      &.single-line{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: rem(80px);
        height: rem(40px);
      }
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
    .ep-title{
      margin-bottom: rem(5px);
    }
    .ep-desc{
      @include max-lines(2);
    }
  }
  @media screen and (orientation:portrait) {
    .vpopup{
      top: rem(255px);
    }
  }
</style>
